<template>
  <view class="index-page">
    <view class="tab-content">
      <u-tabs
        :list="state.tabList"
        bg-color="transparent"
        :is-scroll="true"
        active-color="#fffeff"
        inactive-color="#909a9d"
        font-size="40"
        v-model="state.tabCurrent"
        @change="change"
      />
    </view>
    <scroll-view
      class="scrool"
      :scroll-y="true"
      lower-threshold="30"
      @scrolltolower="bottomOut()"
    >
      <view class="swiper-content">
        <u-swiper
          :list="state.swiperList"
          :effect3d="true"
          bg-color="transparent"
          border-radius="30"
          @click="swiperClick"
        />
      </view>
      <view class="wrap" v-if="[0, 1].includes(state.tabCurrent)">
        <view>
          <collections-card
            v-for="(item, index) in state.list"
            :key="index"
            :listObj="item"
            @click="collectionsClick(item.id)"
          />
        </view>
      </view>
      <view v-else>
        <view
          class="fashou"
          style="width: 700rpx; margin: 0 auto"
          v-for="(item, index) in state.list"
          :key="index"
        >
          <view class="zuo1"> {{ item.title }} </view>
          <view class="list" v-for="(j, index) in item.list" :key="index">
            <view class="listzuo">
              <view class="zuo2">{{ timestampToTime(j.createtime) }}</view>
              <view class="zuo3"></view>
            </view>
            <view class="listyou">
              <view class="list1">
                <view class="title"><image :src="j.image"></image></view>
                <view class="list2">
                  <view class="listtitle">{{ j.name }}</view>
                  <view class="tip">
                    <view class="tip-r">
                      <view class="tip-r-l" v-if="j.type_type == 1">限量</view>
                      <view class="tip-r-l" v-if="j.type_type == 2"
                        >发行量</view
                      >
                      <view class="tip-r-r">{{ j.all_num }}份</view>
                    </view>
                  </view>
                  <view class="price">￥ {{ j.price ?? 0 }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <u-loadmore
        :status="state.status"
        icon-type="flower"
        margin-top="30"
        margin-bottom="30"
      />
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import {
  getBannerList,
  getCollectionList,
  getBoxList,
  calendarList
} from '@/api/modules/homePage'
import CollectionsCard from './components/CollectionsCard.vue'
import { reactive, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { default as useCountStore } from '@/store/modules/countStore'

// 获取自定义的store
const store = useCountStore()
const { currentRoute } = storeToRefs(store)
const state = reactive({
  swiperList: [],
  tabList: [
    {
      name: '藏品'
    },
    {
      name: '盲盒'
    },
    {
      name: '发售日历'
    }
  ],
  tabCurrent: 0,
  status: 'loadmore',
  list: [] as any,
  page: 0
})
onMounted(() => {
  getBanner()
  bottomOut()
})
//轮播图
const swiperClick = (index: number) => {
  uni.navigateTo({
    url: `/pages/webview/index?url=${state.swiperList[index].link}&type=1`
  })
}
//商品点击跳转
const collectionsClick = (item: string | number) => {
  uni.navigateTo({
    url: `/pages/blind-box-details/index?id=${item}&type=${
      state.tabCurrent === 0 ? 0 : 1
    }`
  })
}
//tab change
const change = (index: number) => {
  state.status = 'loadmore'
  state.list = []
  state.page = 0
  state.tabCurrent = index
  bottomOut()
}

//触底加载数据
const bottomOut = () => {
  if (currentRoute.value !== 0) return
  console.log(1111)
  if (state.status === 'nomore') return
  state.status = 'loading'
  state.page = ++state.page
  const promise =
    state.tabCurrent === 0
      ? getCollectionList({ page: state.page, page_size: 5 })
      : state.tabCurrent === 1
      ? getBoxList({ page: state.page, page_size: 5 })
      : calendarList({ page: state.page, page_size: 5 })
  promise.then((result) => {
    if ([0, 1].includes(state.tabCurrent)) {
      state.list.push(...result.data.data)
      if (result.data.data.length < 5) state.status = 'nomore'
      else state.status = 'loading'
    } else {
      state.list.push(...result.data)
      if (result.data.length < 5) state.status = 'nomore'
      else state.status = 'loading'
    }
  })
}

//获取轮播图
const getBanner = () => {
  getBannerList({ type: '2' }).then((result) => {
    state.swiperList = result.data
  })
}
//时间戳
const timestampToTime = (timestamp: number) => {
  let date = new Date(timestamp * 1000) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
  let h = date.getHours() + ':'
  let m = date.getMinutes()
  return h + m
}
</script>

<style scoped lang="scss">
.index-page {
  font-style: normal;
  text-align: center;
  padding-bottom: 60rpx;
  .zuo1 {
    color: #fff;
    margin-left: 48rpx;
    margin-top: 30rpx;
    text-align: left;
    font-size: large;
  }

  .tip {
    padding-top: 15px;
    font-size: 25rpx;
    .tip-r {
      display: flex;
      width: 210rpx;
      .tip-r-l {
        width: 40%;
        background: #9f56ff;
        line-height: 45rpx;
        text-align: center;
        color: #fff;
      }
      .tip-r-r {
        flex: 1;
        background: #68637e;
        line-height: 45rpx;
        text-align: center;
        color: #fff;
      }
    }
  }
  .list {
    overflow: hidden;
    margin-left: 48rpx;
    position: relative;

    .listzuo {
      float: left;
      width: 100rpx;

      .zuo2 {
        background-image: linear-gradient(to right, #9f56ff, #9f56ff);
        border-radius: 8rpx;
        margin-top: 20rpx;
        color: #fff;
        font-size: 26rpx;
        width: 90rpx;
        text-align: center;
        height: 40rpx;
        line-height: 40rpx;
      }

      .zuo3 {
        width: 2rpx;
        height: calc(100% - 100rpx);
        background: #68637e;
        position: absolute;
        left: 40rpx;
        margin: 20rpx 0;
      }
    }

    .listyou {
      float: left;
      width: calc(100% - 130rpx);
      margin-left: 20rpx;

      .list1 {
        overflow: hidden;
        background: url('../../static/image/fa.png') no-repeat;
        background-size: 100% 100%;
        margin-top: 20rpx;
        width: 550rpx;
        display: flex;
      }

      image {
        user-select: none;
        pointer-events: none;
        width: 240rpx;
        height: 240rpx;
        border-radius: 20rpx;
      }

      .title {
        position: relative;

        .qianggou {
          color: #f6bf50;
        }

        .yishouwan {
          color: #ccc;
        }

        view {
          position: absolute;
          z-index: 9;
          background: rgba(0, 0, 0, 0.3);
          width: 141rpx;
          height: 36rpx;
          font-size: 10rpx;
          color: #8edf7c;
          left: 20rpx;
          border-radius: 11rpx;
          top: 30rpx;
          padding-right: 20rpx;

          image {
            user-select: none;
            pointer-events: none;
            width: 20rpx;
            height: 20rpx;
            margin-top: 5rpx;
            margin-right: 10rpx;
          }
        }
      }

      .list2 {
        text-align: left;
        margin-left: 20rpx;

        .listtitle {
          width: 250rpx;
          color: #fff;
          font-size: 36rpx;
          margin-top: 50rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      .price {
        color: #fff;
        margin-top: 20rpx;
        font-size: 32rpx;
      }
    }
  }

  .scrool {
    height: 1370rpx;
  }
  .swiper-content {
    padding: 20rpx 50rpx;
  }
  .tab-content {
    width: 580rpx;
  }
}
</style>
